<template>
    <div>
      <h1>创建房间</h1>
      <div>
        <h2>角色</h2>
        <form @submit.prevent="createRoom">
          <fieldset data-role="controlgroup" data-type="horizontal">
            <legend>神牌</legend>
            <input type="checkbox" name="g-seer" id="g-seer" v-model="roles['g-seer']">
            <label for="g-seer">预言家</label>
            <input type="checkbox" name="g-witch" id="g-witch" v-model="roles['g-witch']">
            <label for="g-witch">女巫</label>
            <input type="checkbox" name="g-hunter" id="g-hunter" v-model="roles['g-hunter']">
            <label for="g-hunter">猎人</label>
            <input type="checkbox" name="g-idiot" id="g-idiot" v-model="roles['g-idiot']">
            <label for="g-idiot">白痴</label>
            <input type="checkbox" name="g-knight" id="g-knight" v-model="roles['g-knight']">
            <label for="g-knight">骑士</label>
            <input type="checkbox" name="g-guard" id="g-guard" v-model="roles['g-guard']">
            <label for="g-guard">守卫</label>
          </fieldset>
  
          <fieldset data-role="controlgroup" data-type="horizontal">
            <legend>狼牌</legend>
            <input type="checkbox" name="w-white" id="w-white" v-model="roles['w-white']">
            <label for="w-white">白狼王</label>
            <input type="checkbox" name="w-hidden" id="w-hidden" v-model="roles['w-hidden']">
            <label for="w-hidden">隐狼</label>
            <input type="checkbox" name="w-king" id="w-king" v-model="roles['w-king']">
            <label for="w-king">狼王</label>
            <input type="checkbox" name="w-devil" id="w-devil" v-model="roles['w-devil']">
            <label for="w-devil">恶魔</label>
            <input type="checkbox" name="w-knight" id="w-knight" v-model="roles['w-knight']">
            <label for="w-knight">恶灵骑士</label>
          </fieldset>
  
          <fieldset data-role="controlgroup">
            <legend>普通狼</legend>
            <label for="n-werewolf">普通狼</label>
            <input type="range" name="n-werewolf" id="n-werewolf" min="0" max="10" v-model.number="roles['n-werewolf']">
          </fieldset>
  
          <fieldset data-role="controlgroup">
            <legend>平民</legend>
            <label for="n-folk">平民</label>
            <input type="range" name="n-folk" id="n-folk" min="0" max="10" v-model.number="roles['n-folk']">
          </fieldset>
  
          <div>
            <label for="username">玩家昵称</label>
            <input type="text" name="username" id="username" v-model="username" placeholder="Player name">
          </div>
          <input type="submit" value="创建房间">
        </form>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import axios from 'axios';
  import { useRouter } from 'vue-router';
  
  const roles = ref({
    'g-seer': false,
    'g-witch': false,
    'g-hunter': false,
    'g-idiot': false,
    'g-knight': false,
    'g-guard': false,
    'w-white': false,
    'w-hidden': false,
    'w-king': false,
    'w-devil': false,
    'w-knight': false,
    'n-werewolf': 1,
    'n-folk': 1
  });
  
  const username = ref('');
  const router = useRouter();
  
  const createRoom = () => {
    const formData = new URLSearchParams();
    for (const [key, value] of Object.entries(roles.value)) {
      formData.append(key, value);
    }
    formData.append('username', username.value);
    axios.post('http://localhost:5353/create', formData)
      .then(response => {
        console.log('房间创建成功:', response.data);
        alert('房间创建成功！');
        router.push({name: 'Room', params: { room: response.data.room, user: response.data.user }})
      })
      .catch(error => {
        console.error('房间创建失败:', error);
        alert('房间创建失败，请重试！');
      });
  };
  </script>